<!DOCTYPE html SYSTEM "http://www.thymeleaf.org/dtd/xhtml1-strict-thymeleaf-4.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
	xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.error {
	color: red;
}
</style>
<title>Displaying Error Messages with Thymeleaf</title>
</head>
<body>
	<div>
		<div>
			<h2>Add a Record</h2>
			<form action="#" th:action="@{/add}" th:object="${user}"
				method="post" class="form">
				<div>
					<label for="fullName">Name</label> <input type="text"
						th:field="*{fullName}" id="fullName" placeholder="Full Name">
					<ul>
						<li th:each="err : ${#fields.errors('fullName')}" th:text="${err}"
							class="error" />
					</ul>
				</div>
				<div>
					<label for="email">Email</label> <input type="text"
						th:field="*{email}" />
					<p th:if="${#fields.hasErrors('email')}"
						th:class="${#fields.hasErrors('email')}? error"
						th:errors="*{email}" />
				</div>
				<div>
					<label for="age">Age</label> <input type="text" th:field="*{age}"
						id="age">
					<p th:if="${#fields.hasErrors('age')}"
						th:class="${#fields.hasErrors('age')}? error">Invalid Age</p>
				</div>
				<div>
					<label for="country">Country</label> <input type="text"
						th:field="*{country}" />
					<p th:if="${#fields.hasErrors('country')}" th:errorclass="error"
						th:errors="*{country}" />
				</div>
				<div>
					<label for="phoneNumber">Phone Number</label> <input type="text"
						th:field="*{phoneNumber}" />
					<p th:if="${#fields.hasErrors('phoneNumber')}"
						th:errorclass="error" th:errors="*{phoneNumber}" />
				</div>
				<div th:if="${#fields.hasErrors('global')}">
					<h3>Global errors:</h3>
					<p th:each="err : ${#fields.errors('global')}" th:text="${err}"
						class="error" />
				</div>
				<h3>All errors in place:</h3>
				<div th:if="${#fields.hasAnyErrors()}">
					<ul>
						<li th:each="err : ${#fields.allErrors()}" th:text="${err}" />
					</ul>
				</div>
				<input type="submit" value="Add Me">
			</form>
			<h3>This is outside the form:</h3>
			<h4>Errors on a single field:</h4>
			<div th:if="${#fields.hasErrors('${user.email}')}"
				th:errors="*{user.email}"></div>
			<h4>All errors:</h4>
			<ul>
				<li th:each="err : ${#fields.errors('user.*')}" th:text="${err}" />
			</ul>
		</div>
	</div>
</body>
</html>